<template>
  <!-- 成线情况 -->
  <div class="alignment">
    <div class="remarks">本页主要填入使用展品的生产线情况</div>
    <div class="alignment_name box">
      <div class="title">产线名称</div>
      <input type="text" name id />
    </div>
    <div class="alignment_img box">
      <div class="title">
        <div class="title1">产线图片</div>
        <div class="title2">（推荐宽高比4：3）</div>
      </div>
      <div class="uploads">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl_a" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="uploads">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl_b" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="uploads">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl_c" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="uploads">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl_d" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="uploads">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl_e" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
    <div class="alignment_des box">
      <div class="title">产线概述</div>
      <div class="textarea">
        <el-input
          type="textarea"
          maxlength="500"
          show-word-limit
          :rows="10"
          placeholder="不超过500字"
          v-model="textarea"
        ></el-input>
      </div>
    </div>
    <div class="alignment_WorkpiecePicture box">
      <div class="title">
        <div class="title1">产线加工的工件图片</div>
        <div class="title2">（推荐宽高比4：3）</div>
      </div>
      <div class="uploadBox">
        <div class="Box1 boxs">
          <div class="uploads">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl1" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="textarea">
            <el-input
              type="textarea"
              show-word-limit
              maxlength="100"
              :rows="15"
              placeholder="上面图片的说明 不超过100字"
              v-model="textarea1"
            ></el-input>
          </div>
        </div>
        <div class="Box2 boxs">
          <div class="uploads">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl2" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="textarea">
            <el-input
              type="textarea"
              show-word-limit
              maxlength="100"
              :rows="15"
              placeholder="上面图片的说明 不超过100字"
              v-model="textarea2"
            ></el-input>
          </div>
        </div>
        <div class="Box3 boxs">
          <div class="uploads">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl3" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="textarea">
            <el-input
              type="textarea"
              show-word-limit
              maxlength="100"
              :rows="15"
              placeholder="上面图片的说明 不超过100字"
              v-model="textarea3"
            ></el-input>
          </div>
        </div>
        <div class="Box4 boxs">
          <div class="uploads">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl4" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="textarea">
            <el-input
              type="textarea"
              show-word-limit
              maxlength="100"
              :rows="15"
              placeholder="上面图片的说明 不超过100字"
              v-model="textarea4"
            ></el-input>
          </div>
        </div>
        <div class="Box5 boxs">
          <div class="uploads">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl5" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="textarea">
            <el-input
              type="textarea"
              show-word-limit
              maxlength="100"
              :rows="15"
              placeholder="上面图片的说明 不超过100字"
              v-model="textarea5"
            ></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="btns">
      <button>保存</button>
      <button>提交</button>
      <button>预览</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      imageUrl_a: "",
      imageUrl_b: "",
      imageUrl_c: "",
      imageUrl_d: "",
      imageUrl_e: "",
      textarea: "",
      imageUrl1: "",
      textarea1: "",
      imageUrl2: "",
      textarea2: "",
      imageUrl3: "",
      textarea3: "",
      imageUrl4: "",
      textarea4: "",
      imageUrl5: "",
      textarea5: "",
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang='less' scoped>
.alignment {
  font-size: 0.18rem;
  width: 16.4rem;
  padding-top: 0.4rem;
  padding-left: 0.6rem;
  padding-bottom: 0.6rem;
  .remarks {
    font-size: 0.18rem;
  }
  .box {
    display: flex;
    margin-top: 0.77rem;
    .title {
      width: 0.9rem;
      margin-right: 0.35rem;
      color: #004cb3;
      .title1 {
      }
      .title2 {
        color: #333333;
        font-size: 0.16rem;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
    }
  }
  .alignment_name {
    margin-top: 0.5rem;
    .title {
      line-height: 0.4rem;
    }
    input {
      width: 4rem;
      height: 0.4rem;
      border: 0.01rem solid rgba(204, 204, 204, 1);
      outline: none;
    }
  }
  .alignment_img {
    .uploads {
      margin-right: 0.4rem;
    }
    .uploads:nth-last-child(1) {
      margin-right: 0;
    }
  }
  .alignment_des {
    .textarea {
      width: 11rem;
    }
  }
  .alignment_WorkpiecePicture {
    margin-bottom: 1.38rem;
    .uploadBox {
      display: flex;
      .boxs {
        margin-right: 0.4rem;
        .uploads {
          margin-bottom: 0.65rem;
        }
      }
      .boxs:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
  .btns {
    margin-top: 0.75rem;
    button {
      width: 0.8rem;
      height: 0.4rem;
      border-radius: 0.05rem;
      border: none;
      outline: none;
      color: #fff;
      font-weight: bold;
      font-size: 0.16rem;
    }
    button:nth-child(1) {
      margin-left: 5rem;
      background-color: #e29000;
    }
    button:nth-child(2) {
      background-color: #e20000;
      margin: 0 0.7rem;
    }
    button:nth-child(3) {
      background-color: #004cb3;
    }
  }
  .upload {
    /deep/ .el-upload--picture-card {
      width: 2.4rem;
      height: 1.8rem;
      line-height: 1.8rem;
      border: 1px solid #c0ccda;
    }
    /deep/ .el-upload-list--picture-card .el-upload-list__item {
      width: 2.4rem;
      height: 1.8rem;
    }
  }
  .uploads {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 2.4rem;
      height: 1.8rem;
      line-height: 1.8rem;
      text-align: center;
      border: 1px solid rgba(204, 204, 204, 1);
    }
    .avatar {
      width: 2.4rem;
      height: 1.8rem;
      // border: 1px solid rgba(204, 204, 204, 1);
      display: block;
    }
  }
}
</style>